<%--
  Created by IntelliJ IDEA.
  User: 苏海娜
  Date: 2025/7/1
  Time: 20:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>用户注册 - 留言板</title>
    <!-- Bootstrap 5 CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome for icons (optional) -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: #f5f8fa;
        }
        .register-container {
            max-width: 420px;
            margin: 50px auto;
            background: #fff;
            padding: 32px 28px 24px 28px;
            border-radius: 8px;
            box-shadow: 0 2px 16px rgba(0,0,0,0.08);
        }
        .form-title {
            text-align: center;
            margin-bottom: 28px;
        }
        .avatar-preview {
            width: 64px;
            height: 64px;
            object-fit: cover;
            border-radius: 50%;
            margin: 0 auto 18px auto;
            display: block;
            border: 1.5px solid #eee;
        }
    </style>
<%--    <script>--%>
<%--        function previewAvatar(input) {--%>
<%--            const file = input.files[0];--%>
<%--            if (file) {--%>
<%--                const reader = new FileReader();--%>
<%--                reader.onload = function(e) {--%>
<%--                    document.getElementById('avatarImg').src = e.target.result;--%>
<%--                };--%>
<%--                reader.readAsDataURL(file);--%>
<%--            }--%>
<%--        }--%>
<%--    </script>--%>
</head>
<body>
<div class="register-container shadow">
    <h3 class="form-title"><i class="fa fa-user-plus"></i> 用户注册</h3>

    <c:if test="${not empty requestScope.error}">
        <div class="form-error">${requestScope.error}</div>
    </c:if>

    <form action="register" method="post" onsubmit="return validatePasswords()">
<%--    <form action="RegisterServlet" method="post" enctype="multipart/form-data" onsubmit="return validatePasswords()">--%>
<%--        <img id="avatarImg" src="images/default_avatar.png" alt="头像预览" class="avatar-preview mb-2">--%>
        <div class="mb-3">
            <label class="form-label" for="username"><i class="fa fa-user"></i> 用户名</label>
            <input type="text" class="form-control" id="username" name="username" required maxlength="30" placeholder="请输入用户名">
        </div>
        <div class="mb-3">
            <label class="form-label" for="password"><i class="fa fa-lock"></i> 密码</label>
            <input type="password" class="form-control" id="password" name="password" required minlength="6" placeholder="请输入密码">
        </div>

        <div class="mb-3">
            <label class="form-label" for="confirmPassword"><i class="fa fa-lock"></i>确认密码</label>
            <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" placeholder="请再次输入密码" required minlength="6">
            <div id="passwordMatchMessage" class="form-error"></div>
        </div>

        <div class="mb-3">
            <label class="form-label" for="email"><i class="fa fa-envelope"></i> 邮箱</label>
            <input type="email" class="form-control" id="email" name="email" maxlength="60" placeholder="用于找回密码">
        </div>


<%--        </div>--%>
<%--        <div class="mb-3">--%>
<%--            <label class="form-label" for="avatar"><i class="fa fa-image"></i> 头像</label>--%>
<%--            <input type="file" class="form-control" id="avatar" name="avatar" accept="image/*" onchange="previewAvatar(this)">--%>
<%--        </div>--%>
        <button type="submit" class="btn btn-primary w-100 mt-2"><i class="fa fa-user-plus"></i> 注册</button>
        <div class="text-center mt-3">
            已有账号？<a href="login.jsp">立即登录</a>
        </div>
    </form>
</div>
<!-- Bootstrap JS (optional, for interactivity) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 获取密码和确认密码输入框
    const passwordInput = document.getElementById('password');
    const confirmPasswordInput = document.getElementById('confirmPassword');
    const messageDiv = document.getElementById('passwordMatchMessage');

    // 监听确认密码输入框的变化
    confirmPasswordInput.addEventListener('input', validatePasswordsOnInput);
    passwordInput.addEventListener('input', validatePasswordsOnInput);

    // 实时验证密码匹配
    function validatePasswordsOnInput() {
        const password = passwordInput.value;
        const confirmPassword = confirmPasswordInput.value;

        if (password === confirmPassword) {
            messageDiv.textContent = '密码匹配';
            messageDiv.className = 'password-match';
        } else if (confirmPassword !== '') {
            messageDiv.textContent = '两次输入的密码不一致';
            messageDiv.className = 'password-mismatch';
        } else {
            messageDiv.textContent = '';
        }
    }

    // 表单提交时验证
    function validatePasswords() {
        const password = passwordInput.value;
        const confirmPassword = confirmPasswordInput.value;

        if (password !== confirmPassword) {
            messageDiv.textContent = '两次输入的密码不一致';
            messageDiv.className = 'password-mismatch';
            confirmPasswordInput.focus();
            return false;
        }

        return true;
    }
</script>
</body>
</html>
